<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/8/18 0018
  Time: 20:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入标签库 做标签式授权--%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>

<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

    <script type="text/javascript">

        layui.use('table',function(){

            var table = layui.table;

            table.render({
                elem:"#myTable",//表格的id
                url:"${pageContext.request.contextPath}/banner/selectByPageBanner",//数据接口 请求地址
                page:true,//开启分页
                //发送的额外参数
                where:{"name":"${param.name}"},
                //顶部工具栏
                toolbar:"#mytoolbar",
                //页面初始大小
                limit:2,
                //页面下拉列表框中的内容
                limits:[1,2,3,4,5,10,20,30,50],
                //列
                cols:[[
                    {type:"checkbox"},
                    {title:"编号",field:"bannerId"},
                    {title:"图片",field:"bannerOldName",templet:"#img"},
                    {title:"图片名字",field:"bannerOldName"},
                    {title:"状态",field:"bannerState",templet:"#bannerState"},
                    {title:"上传时间",field:"bannerDate"},
                    {title:"图片描述",field:"bannerDescript"},
                    {title:"操作",templet:"#caoZuo"}
                ]]
            });
        });

    //日期控件
        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#date' //指定元素
            });
        });



        layui.use(['form','layer','table'],function(){
            var form =  layui.form;
            var layer = layui.layer;
            var table = layui.table;

            form.verify({
                //dName:function(value,item) {//value：输入框里面的值 item：DOM对象


              //  }

            });



            //当提交修改的form表单时 并且验证都通过 才会进入到此函数
            form.on('submit(update)',function(data){

                $.ajax({
                    url:"${pageContext.request.contextPath}/banner/updateBanner",
                    data:data.field,
                    success:function(data){

                        alert(data+"-----------------")
                        console.log(data);
                        if(data.isUpdate){
                            layer.alert("修改成功",{time:2000});
                        }else{
                            layer.alert("修改失败",{time:2000});
                        }
                        //关闭弹出层
                        layer.closeAll("page");
                        //刷新table
                        table.reload("myTable");

                    }
                });
                //阻止表单提交
                return false;

            });






            table.on('tool(test)',function(obj){

                // var data = obj.data();
                // var  iayEvent = obj.event;
                // var tr = obj.tr;




                // console.log(iayEvent);
                // console.log(tr);
            });


        })






        //让添加的弹出层显示  打开
        function toOpenLayer() {

            layui.use('layer',function(){
               layer.open({
                   title:"添加轮播图",
                   content:$("#addForm"),
                   type:1,
                   maxmin:true
               })
            });
        }



        function deleteDt(id) {
            alert(id);
            layui.use(['table','layer'],function () {

                var table=layui.table;
                $.ajax({
                    url:"${pageContext.request.contextPath}/banner/deleteBanner",
                    data:{"bannerId":id},
                    success:function(data){

                        console.log(data);
                        if(data.isDelete){
                            layer.alert("删除成功",{time:2000});
                            //刷新table
                            table.reload("myTable");
                        }else{
                            layer.alert("删除失败",{time:2000});
                        }

                    }
                });

            })


        }

        function doUpdateLayer(id) {
        alert(id);
            $.ajax({
                url:"${pageContext.request.contextPath}/banner/selectOneBanner",
                data:{"id":id},
                success:function(data){
                    console.log(data);

                    //打开显示  修改的弹出层
                    layer.open({
                        title:"修改弹出层",
                        content:$("#updateForm"),
                        type:1,
                        maxmin:true
                    });


                    $("#bname").val(data.bannerOldName);
                    $("#bid").val(data.bannerId);
                    $("#bdesc").val(data.bannerDescript);
                    //渲染
                    layui.form.render();


                }
            });

        }
        
        function Registration(id,state) {

            layui.use(['table','layer'],function () {

                var table=layui.table;
                var layer=layui.layer;
              /*  alert(id);
                alert(state);*/
                var value=0;
                if(state == 0){
                    value=1;
                }
                var layer=layui.layer;
                $.ajax({
                    url:"${pageContext.request.contextPath}/banner/updateState",
                    data:{"id":id,"state":value},
                    success:function (data) {

                        console.log()
                        alert("111");
                        if(data.isUpdate){
                            //刷新table 刷新table
                            table.reload("myTable");
                        }else{
                            alert("修改失败");
                        }


                    }
                });


            })

        }

        var file_upload_status=false;
        //JavaScript代码区域
            layui.use(['element','upload','table','layer'], function(){
                var element = layui.element;
                var $ = layui.jquery,upload = layui.upload;
                var table=layui.table;
            var layer=layui.layer;
            //普通图片上传
            var uploadInst = upload.render({
                //绑定选择图片的按钮
                elem: '#test1',
                // 文件上传的地址
                url: '${pageContext.request.contextPath}/banner/insertBanner',
               //1.开启多文件上传  有一个文件队列（集合）
                multiple:true,
                //最大上传个数
                number:1,
               //携带额外的参数
                data:{
                    // 参数携带格式 key-匿名函数
                    bannerOldName:function () {
                        // 函数返回值 是通过选择器获取到的表单元素的值
                        return $('#bannerOldName').val();
                    },
                    bannerDescript:function () {
                        return $("#desc").val();
                    }
                },
                // 不让文件上传组件自动上传
                auto:false,
                // 绑定提交按钮 让按钮决定什么时候提交 添加的时候上传
                bindAction: '#addSubmit',

                choose: function(obj){
                    //1.每次选择的文件追加到文件队列  2.把选择的文件放在集合中
                    var files= this.files = obj.pushFile();
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        //3.在选择文件之后 修改公共变量为true
                        file_upload_status=true;
                        $('#imgdemo1').attr('src', result); //图片链接（base64）
                    });
                },done: function(res,index,upload){
                    document.getElementById("addForm").reset();
                    console.log("+++++++++"+index);
                 //1.清空表单  清空图片  修改file_upload_status 为false
                    file_upload_status=false;
                    $("#imgdemo1").attr("src","");
                    //index  被上传的文件在队列中的下标  通过delete方法可以删除队列中的文件
                    delete  this.files[index];
                    // 获取上传的结果 获取后台的响应  如有响应的json可以获取
                    //如果上传失败
                    if(!res.isInsert){
                        return layer.msg('上传失败');
                    }else{
                        //上传成功 关闭弹出层
                        layer.closeAll("page");
                        //刷新table 刷新table
                        table.reload("myTable");

                    }

                }
            });
        });

            function addSubmitt() {
                alert("ajax");

                layui.use(["layer","table"],function () {

                    var layer=layui.layer;
                    var table =layui.table;


                    if(!file_upload_status){

                        var oldname=$('#bannerOldName').val();
                        var desc= $("#desc").val();
                        $.ajax({
                            url:"${pageContext.request.contextPath}/banner/insertBanner",
                            data:{"bannerOldName":oldname,"bannerDescript":desc},
                            success:function (data) {

                                file_upload_status=false;
                                //上传成功 关闭弹出层
                                layer.closeAll("page");
                                //刷新table 刷新table
                                table.reload("myTable");

                            }
                        });
                    }

                })

            }


    </script>
    <script type="text/html" id="sexFormat">

        <%--{{#  if(d.patientSex==0){ }}--%>
        <%--女--%>
        <%--{{#  } else { }}--%>
        <%--男--%>
        <%--{{#  } }}--%>
        <img src="${pageContext.request.contextPath}/getCode">
</script>

    <script type="text/html" id="bannerState">

        {{# if (d.bannerState=== 0) { }}
        显示
        {{# } else if(d.bannerState=== 1) { }}
        不显示
        {{# } else { }}
        删除
        {{# } }}

    </script>

    <script type="text/html" id="img">
      <img src="${pageContext.request.contextPath}/img/{{d.bannerImage}}" alt="不显示"/>

</script>

    <script type="text/html" id="caoZuo">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="doUpdateLayer({{d.bannerId}})" >修改</button>
        <button type="button" class="layui-btn layui-btn-danger" onclick="deleteDt({{d.bannerId}})" >删除</button>
        <button type="button" class="layui-btn layui-btn-danger" onclick="Registration({{d.bannerId}},{{d.bannerState}})" >状态</button>
    </script>

    <style type="text/css">
        .layui-table-cell{
            height: auto;
            line-height: 50px;
        }

    </style>
   
</head>
<body>
<table id="myTable" lay-data="{id:'myTable'}" >

</table>
dsadsad


<div id="mytoolbar"  style="display: none">

    <%--<shiro:hasPermission name="banner:create">--%>
    <%--<button  type="button" class="layui-btn " onclick="toOpenLayer()">--%>
        <%--<i class="layui-icon">&#xe608;</i> 添加--%>
    <%--</button>--%>
    <%--</shiro:hasPermission>--%>
    <%--<shiro:hasAnyRoles name="superadmin">--%>
        <%--超级管理员角色--%>
    <%--</shiro:hasAnyRoles>--%>
    <%--<shiro:hasAnyRoles name="admin">--%>
        <%--普通管理员--%>
    <%--</shiro:hasAnyRoles>--%>
    <%--&lt;%&ndash;获取用户名&ndash;%&gt;--%>
    <%--<shiro:principal/>--%>

        <button  type="button" class="layui-btn " onclick="toOpenLayer()">
            <i class="layui-icon">&#xe608;</i> 添加
        </button>
</div>


<form id="addForm" style="display: none" class="layui-form"  >
    <div class="layui-form-item">
        <label class="layui-form-label">选择要上传图片</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="test1">上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo1">
                <p id="demoText"></p>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片名字</label>
        <div class="layui-input-block">
            <input name="bannerOldName" id="bannerOldName" class="layui-input" placeholder="请输入图片名称" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <input name="bannerDescript"  id="desc" class="layui-input" placeholder="请输入图片描述" />
        </div>

    </div>

    <div class="layui-form-item">
        <button lay-submit type="button" id ="addSubmit" lay-filter="add" onclick="addSubmitt()" class="layui-btn">添加轮播图</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>


<form id="updateForm" style="display: none" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">图片名字</label>
        <div class="layui-input-block">
            <input name="bannerOldName" class="layui-input"  id="bname"/>
            <input name="bannerId" class="layui-input" id="bid" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片描述</label>
        <div class="layui-input-block">
            <input name="bannerDescript"  id="bdesc" class="layui-input"  />
        </div>

    </div>
    <div class="layui-form-item">
        <button lay-submit type="button" lay-filter="update" class="layui-btn">修改轮播图</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

</body>
</html>
